/*
 * @author: Victor
 * @Date: 2021-04-12 14:56:02
 * @LastEditTime: 2021-04-12 18:43:15
 */
window.addEventListener('load', function () {
  // 需求:
  //   1 自动播放
  //   2 手指滑动播放
  //   获取元素
  var focus = document.querySelector('.focus');
  var ul = focus.children[0];
  var ol = focus.children[1];
  //记录当前显示图片的下标
  var index = 0;
  //   轮播图宽度
  var w = focus.offsetWidth;
  // 自动播放定时器
  var timer;
  // 标记手指是否滑动
  var moved = false;
  //   自动播放
  autoplay();
  function autoplay() {
    timer = setInterval(function () {
      index++;
      var translateX = -index * w;
      ul.style.transition = 'all .3s';
      ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000);
  }

  // 无缝播放 当播放到了复制的第一张时，快速切换到真的第一张，当播放到了复制的最后一张时，快速切换到真的最后一张，需在过渡效果结束时作如上处理 transitionend
  ul.addEventListener('transitionend', function () {
    // console.log(index, ol.children.length);
    if (index >= ol.children.length) {
      // 播放到了复制的第一张
      index = 0;
      // 取消过渡效果
      ul.style.transition = 'none';
      ul.style.transform = 'translateX(0)';
    } else if (index < 0) {
      // 播放到了复制的最后一张
      index = ol.children.length - 1;
      ul.style.transition = 'none';
      var translateX = -index * w;
      ul.style.transform = 'translateX(' + translateX + 'px)';
      moving = false;
    }

    // 当前具有current类的li 移除current类
    ol.querySelector('.current').classList.remove('current');
    // 当前索引对应的li增加current类
    ol.children[index].classList.add('current');
  });

  // 手指拖动轮播图
  var x;
  var moveX;
  //   开始触摸
  ul.addEventListener('touchstart', function (e) {
    // 记录手指初始x坐标
    x = e.targetTouches[0].pageX;
    // 停止自动播放
    clearInterval(timer);
  });
  //   手指滑动
  ul.addEventListener('touchmove', function (e) {
    moved = true;
    //计算手指滑动的水平距离
    moveX = e.targetTouches[0].pageX - x;
    //计算ul的最新偏移
    var translateX = -index * w + moveX;
    // 清除过渡效果
    ul.style.transition = 'none';
    //将最新偏移赋值给ul的transform
    ul.style.transform = 'translateX(' + translateX + 'px)';
    //阻止滑动默认行为
    e.preventDefault();
  });

  //   手指离开时决定是上一张 下一张还是 回弹
  ul.addEventListener('touchend', function () {
    if (moved) {
      if (Math.abs(moveX) > 50) {
        //上一张或下一张
        if (moveX > 0) {
          // 从左往右滑，上一张
          index--;
        } else {
          // 从右往左滑，下一张
          index++;
        }
        ul.style.transition = 'all .3s';
      } else {
        //回弹
        ul.style.transition = 'all .1s';
      }
      var translateX = -index * w;
      ul.style.transform = 'translateX(' + translateX + 'px)';
    }
    moved = false;
    // 恢复自动播放
    autoplay();
  });
});
